
import { Candidate } from "../../context/Voter";
import Style from "./Card.module.css";
// import Image from "next/image";
import React from "react"
interface CardProps {
    candidateArray: Candidate[];
    giveVote: (id: { address: string; id: number }) => Promise<void>;
}
const Card: React.FC<CardProps> = ({ candidateArray, giveVote }) => {
    return (
        <div className={Style.card}>
            {candidateArray?.map((el: Candidate, index: number) => {
                // 确保el及其属性不为undefind
                const safeEL = el as Required<Candidate>;
                return (
                    <div className={Style.card_box} key={index}>
                        <div className={Style.image}>
                            <img
                                src={safeEL.image}
                                alt="Profile photo"
                            />
                        </div>

                        <div className={Style.card_info}>
                            <h2>#{safeEL.candidateID}</h2>
                            <p>AGE: {safeEL.age}</p>
                            <p>Addess: {safeEL.address.slice(0, 20)}..</p>
                            <p className={Style.total}>Total Vote</p>
                        </div>

                        <div className={Style.card_vote}>
                            <p>{safeEL.totalVote}</p>
                        </div>

                        <div className={Style.card_button}>
                            <button
                                onClick={() => {
                                    giveVote({ id: safeEL.candidateID, address: safeEL.address })
                                }}
                            >
                                Give Vote
                            </button>
                        </div>
                    </div>
                )

            })}
        </div>
    )
}

export default Card;